<!doctype html>
<html>

<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style type='text/css'>
    html {
        font-family: Helvetica;
        color: #222;
    }

    h1 {
        color: steelblue;
        font-size: 24px;
        margin-top: 24px;
    }

    button {
        margin: 0 3px 10px;
        font-size: 12px;
    }

    .logLine {
        border-bottom: 1px solid #ccc;
        padding: 4px 2px;
        font-family: courier;
        font-size: 11px;
    }
    </style>
</head>

<body>
    <h1>WebViewJavascriptBridge Demo</h1>
    <!--   放在head里面回调不会执行 不知道为什么？     -->
    <script>
    window.onerror = function(err) {
        log('window.onerror: ' + err)
    }
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    setupWebViewJavascriptBridge(function(bridge) {
        var uniqueId = 1

        function log(message, data) {
            var log = document.getElementById('log')
            var el = document.createElement('div')
            el.className = 'logLine'
            el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
            if (log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) }
        }

        bridge.registerHandler('ocCallJS', function(data, responseCallback) {
            document.getElementById("demo").innerHTML = JSON.stringify(data);
            log('ObjC called ocCallJS with', data)
            var responseData = { 'Javascript Says': 'Right back atcha!' }
            log('JS responding with', responseData)
            responseCallback(responseData)
        })
        
        var callbackButton = document.getElementById('callOC');
        callbackButton.onclick = function(e) {
            e.preventDefault()
            log('JS calling handler "jsCallOC"')
            bridge.callHandler('jsCallOC', {'foo': 'bar'}, function(response) {
                log('JS got response', response)
            })
        }
        
    })
    function alert1Click() {
        window.alert("sometext");
    }

    function alert2Click() {
        var r = window.confirm("sometext");
        var x;
        if (r==true)
        { x="你按下了\"确定\"按钮!";}
        else
        { x="你按下了\"取消\"按钮!";}
        document.getElementById("demo").innerHTML=x;
    }

    function alert3Click() {
        var person = window.prompt("sometext","defaultvalue");
        var x;
        x="你好 " + person + "! 今天感觉如何?";
        document.getElementById("demo").innerHTML=x;
    }

<!--    function jsCallOC() {-->
<!--        document.getElementById("demo").innerHTML=Date();-->
<!--    }-->
    </script>
    
    <div id='buttons'></div>
    <h6 id="demo">WebViewJavascriptBridge Demo</h6>
    <button type="button" onclick="alert1Click()">alert 1</button>
    <button type="button" onclick="alert2Click()">alert 2</button>
    <button type="button" onclick="alert3Click()">alert 3</button>
    <button id = 'callOC' type="button">js调用源生方法</button>
    <div id='log'></div>
</body>

</html>
